<template>
  <div>

<!--    司机当前接单信息-->
    <van-cell is-link center>
      <div style="display: flex;" >
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
          <div style="text-align: center;">{{form.sumTime}}</div>
          <div style="text-align: center;">接单时长</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
          <div style="text-align: center;">{{form.sumNum}}</div>
          <div style="text-align: center;">接单数</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
          <div style="text-align: center;">{{form.onecePrice}}</div>
          <div style="text-align: center;">今日流水</div>
        </div>
      </div>
    </van-cell>


<!--    热力图等三个功能跳转页面-->
    <van-cell>
      <div style="display: flex;">
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: row; align-items: center;">
          <van-icon name="fire-o" />
          <div style="text-align: center;">热力图</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: row; align-items: center;">
          <van-icon name="location-o" />
          <div style="text-align: center;">找附近</div>
        </div>
        <div style="flex: 1; padding: 10px; display: flex; flex-direction: row; align-items: center;">
          <van-icon name="setting-o" />
          <div style="text-align: center;">偏好设置</div>
        </div>
      </div>
    </van-cell>
    <div>
      <div class="circle-container">
        <div class="checkmark"></div>
      </div>
      <div>司机资质审核沟通过</div>
    </div>






    <van-button @click="goToTheGetOrderIndex" type="primary">开始接单</van-button>

    <Tabbar/>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue"
import {createTodayOrderItem, getOrderOneTimeItem} from "@/components/api/homepage/homePage";
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
        form:{},
    //   新创建的订单id
      todayId:"",
      driverId:1,
    };
  },
  created() {
  //   页面初始化去后台查数据
  this.findDriverInfo();
  },
  methods: {
    findDriverInfo(){
      getOrderOneTimeItem(this.driverId).then(res=>{
        this.form=res.orderInformation
      })
    },
    goToTheGetOrderIndex(){
      // 这里通过司机id去创建今日订单
      createTodayOrderItem(this.driverId).then(res=>{
        this.todayId=res.todayId
        localStorage.setItem('todayId', this.todayId);
        console.log(res)
      })
      this.$router.push({
        path: '/GetOrder',
        query: {
          driverId: this.driverId,
        }
      })
    },
  },
};
</script>
<style>
.circle-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #4CAF50;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark {
  width: 10px;
  height: 15px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
  position: absolute;
}
.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
}

.left {
  order: 1; /* 控制左侧元素在最左边 */
}

.right {
  order: 2; /* 控制右侧元素在最右边 */
}

img {
  width: 20px; /* 设置图标宽度 */
  height: 20px; /* 设置图标高度 */
  margin-right: 5px; /* 图标与文本间距 */
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.van-cell-top{
  line-height: 80px;
}
.theOrderInderBoxFirst{
  border-radius: 10px;
  height: 40px;
  width: 80%;
  margin-left: 10%;
  background-color: #edf6fa;
}
.theOrderInderBoxSecond{
  border-radius: 10px;
  height: 40px;
  width: 80%;
  margin-left: 10%;
  margin-top: 10px;
  background-color: #f4f4f4;
}
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}
.radioBox{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green ;
  margin-left: 40px;
  margin-right: 10px;
}

</style>
